<template>
  <div class="account flex-box">
    <a-avatar :size="24" class="img-icon" :src="logo" shape="square"/>

    <a-dropdown>
      <a class="ant-dropdown-link color-white" @click.prevent>
        {{ hasLogin ? userInfo.nickName : "欢迎冲浪" }}
        <my-icon type="icon-test3"></my-icon>
      </a>
      <a-menu slot="overlay" @click="handlerChange">
        <a-menu-item v-for="item in menus" :value="item.key" :key="item.key">
          <my-icon :type="item.icon"></my-icon>
          {{ item.title }}
        </a-menu-item>
      </a-menu>
    </a-dropdown>

    <login-box
        v-if="loginVisible"
        :visible="loginVisible"
        @close="loginVisible = false"
    ></login-box>

    <register-box
        v-if="registerVisible"
        :visible="registerVisible"
        :isRegister="isRegister"
        @close="registerVisible = false"
    ></register-box>
  </div>
</template>

<script>
import {mapState} from "vuex";
import LoginBox from "../../components/modals/login.vue";
import RegisterBox from "../../components/modals/register.vue";

const unloginMenu = [
  {
    title: "登录",
    icon: "user",
    key: "login",
  },
  {
    title: "注册",
    icon: "zhuce",
    key: "register",
  },
];

const loginedMenu = [
  {
    title: "修改信息  ",
    icon: "edit",
    key: "edit",
  },
  {
    title: "退出登录",
    icon: "sign-out",
    key: "sign-out",
  },
];

export default {
  components: {
    LoginBox,
    RegisterBox,
  },
  data() {
    return {
      menus: unloginMenu,
      logo: require("../../assets/images/my-icon.png"),
      loginVisible: false,
      registerVisible: false,
      isRegister: true,
    };
  },
  computed: {
    ...mapState(["hasLogin", "userInfo"]),
  },
  watch: {
    hasLogin: {
      handler(val) {
        if (val) {
          this.menus = loginedMenu;
        } else {
          this.menus = unloginMenu;
        }
      },
      immediate: true,
    },
  },
  methods: {
    handlerChange(data) {
      let _this = this;
      switch (data.key) {
        case "login":
          _this.loginVisible = true;
          break;

        case "sign-out":
          _this.$confirm({
            title: "温馨提示",
            content: "您确定要退出吗？",
            okText: "确定",
            cancelText: "取消",
            onOk() {
              _this.handlerLogout();
            },
            onCancel() {
            },
          });
          break;

        case "register":
          this.isRegister = true;
          this.registerVisible = true;
          break;

        case "edit":
          this.isRegister = false;
          this.registerVisible = true;
          break;

        default:
          break;
      }
    },
    handlerLogout() {
      this.$http("/user/logout", {
        userId: this.userInfo.userId,
        userName: this.userInfo.userName,
      }).then(() => {
        this.$storage.remove("userInfo");
        this.$storage.remove(`${this.userInfo.userName}_token`);
        this.$storage.remove(`${this.userInfo.userName}_links`);
        this.$store.dispatch("logout");
        this.$message.success("退出成功！");
      });
    },
  },
};
</script>

<style lang="less">
.account {
  justify-content: flex-end;
  min-width: 160px;
  padding: 20px auto;

  .ant-dropdown-link {
    display: inline-block;
    padding: 0 15px;
  }
}
</style>
